<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--<meta http-equiv="Access-Control-Allow-Origin" content="*" />-->
    <title>登录</title>
    <link rel="stylesheet" href="frame/layui/css/layui.css">
    <link rel="stylesheet" href="frame/static/css/style.css">
    <link rel="icon" href="frame/static/image/code.png">
</head>

<body style="background-color: #393D49;">
    <div class="login-main" >
        <header class="layui-elip" style="color: #FFFFFF;">用户登录</header>
        <form class="layui-form" action="127.0.0.1:8002/sk/admin/um/signin">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="username" id="username" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="password" name="password" id="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline login-btn">
                    <button class="layui-btn" id="submit" lay-submit="" lay-filter="login">登录</button>
                </div>
            </div>
            <hr/>
            <p>
                <!--<label><input id="remember" type="checkbox">记住密码</label><br>-->
                <input type='checkbox' name='remember' id="remember" lay-filter='remember' lay-skin='primary' title='记住密码'>
                <!-- <a href="javascript:;" class="fl">立即注册</a>-->
                <a href="javascript:;" class="fr" style="color: #c2c2c2;">忘记密码？</a>
            </p>
        </form>
    </div>

    <script src="./frame/layui/layui.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript">
        layui.use(['form'], function () {

            // 操作对象
            var form = layui.form,
                $ = layui.jquery,
                layer = layui.layer;

            function loginSuccess() {
                layer.msg("登录成功", {
                    icon: 6,
                    time: 1000
                }, function (index) {
                    layer.close(index);
                    window.location.href = 'index.html?' + 'username=' + $('#username').val();
                });
            }

            function loginError(msg) {
                layer.msg(msg, {
                    icon: 5,
                    time: 2000
                }, function (index) {
                    layer.close(index);
                });
            }

            //页面初始化时，如果帐号密码cookie存在则填充
            if (getCookie('username') && getCookie('password')) {
                $("#username").val(getCookie('username'));
                $("#password").val(getCookie('password'));
                $('#remember').attr("checked");
            } else {
                //聚焦输入框
                $("#username").focus();
            }
            //监听复选框状态变化
            form.on('checkbox(remember)', function (data) {
                if (!data.elem.checked) {
                    delCookie('username');
                    delCookie('password');
                }
            });
            // you code ...
            form.on('submit(login)', function (data) {
                $.ajax({
                    url: accountBackPath + '/signin',
                    type: 'post',
                    dataType: 'json',
                    crossDomain: true,
                    data: {
                        "username": $('#username').val(),
                        "password": $('#password').val(),
                        "rememberMe": 1
                    },
                    beforeSend: function () {
                        // 禁用按钮防止重复提交
                        $("#submit").attr({
                            disabled: "disabled"
                        });
                    },
                    success: function (result) {
                        if (result.code == 200) {
                            loginSuccess();
                        } else {
                            loginError(result.msg);
                        }
                    }
                })
                //记住密码写cookie
                if ($("input[type='checkbox']").is(':checked')) {
                    setCookie("username", $("#username").val(), 7); //保存帐号到cookie，有效期7天
                    setCookie("password", $("#password").val(), 7); //保存密码到cookie，有效期7天
                } else {
                    delCookie("username");
                    delCookie("password");
                }
                return false;
            });
            //写cookies
            function setCookie(name, value, day) {
                var exdate = new Date()
                exdate.setDate(exdate.getDate() + day)
                document.cookie = name + "=" + escape(value) +
                    ((day == null) ? "" : ";expires=" + exdate.toGMTString())
            }
            //读取cookies 
            function getCookie(name) {
                var reg = RegExp(name + '=([^;]+)');
                var arr = document.cookie.match(reg);
                if (arr) {
                    return arr[1];
                } else {
                    return '';
                }
            }
            //删除cookies 
            function delCookie(name) {
                setCookie(name, null, -1);
            }
        });
    </script>
</body>

</html>
